import { useEffect, useState } from 'react';
import { Row, Col, Empty, Tabs } from 'antd';
import { Chart, Interval, Axis, Legend } from 'bizcharts';
import _ from 'lodash';
import classNames from 'classnames';
import styles from './index.less';

const { TabPane } = Tabs;
const assesScoreSumByClass = {
  data: {
    result: {
      weekData: [
        {
          typeName: null,
          name: '2020级1班',
          flag: 1,
          score: 5,
          id: 0,
          code: 'csxx0001',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级2班',
          flag: -1,
          score: 1,
          id: 0,
          code: 'csxx0002',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级2班',
          flag: 1,
          score: 11,
          id: 0,
          code: 'csxx0002',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级3班',
          flag: -1,
          score: 2,
          id: 0,
          code: 'csxx0003',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级3班',
          flag: 1,
          score: 1,
          id: 0,
          code: 'csxx0003',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级4班',
          flag: -1,
          score: 2,
          id: 0,
          code: 'csxx0004',
          indexName: null,
          indexList: null,
        },
      ],
      termData: [
        {
          typeName: null,
          name: '2020级1班',
          flag: -1,
          score: 9,
          id: 0,
          code: 'csxx0001',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级1班',
          flag: 1,
          score: 39,
          id: 0,
          code: 'csxx0001',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级2班',
          flag: -1,
          score: 9,
          id: 0,
          code: 'csxx0002',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级2班',
          flag: 1,
          score: 32,
          id: 0,
          code: 'csxx0002',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级3班',
          flag: -1,
          score: 5,
          id: 0,
          code: 'csxx0003',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级3班',
          flag: 1,
          score: 9,
          id: 0,
          code: 'csxx0003',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级4班',
          flag: -1,
          score: 6,
          id: 0,
          code: 'csxx0004',
          indexName: null,
          indexList: null,
        },
        {
          typeName: null,
          name: '2020级4班',
          flag: 1,
          score: 9,
          id: 0,
          code: 'csxx0004',
          indexName: null,
          indexList: null,
        },
      ],
    },
  },
};
export default () => {
  const [activeTabKey, setActiveTabKey] = useState('1');
  const [weekChartData, setWeekChartData] = useState([]);
  const [termChartData, setTermChartData] = useState([]);

  useEffect(() => {
    if (assesScoreSumByClass.data) {
      setWeekChartData(
        _.orderBy(
          assesScoreSumByClass.data.result?.weekData.map((x) => ({
            ...x,
            flag: x.flag === -1 ? '减分' : '加分',
          })),
          ['name', 'flag'],
          ['asc', 'asc'],
        ),
      );
      setTermChartData(
        _.orderBy(
          assesScoreSumByClass.data.result?.termData.map(
            (x) => ({
              ...x,
              flag: x.flag === -1 ? '减分' : '加分',
            }),
            ['name', 'flag'],
            ['asc', 'asc'],
          ),
        ),
      );
    }
  }, []);

  return (
    <div className={classNames(styles.wrapper)}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']}>
        <Col span={24}>
          <Row gutter={12}>
            <Col span={12}>
              <Row
                className={classNames(
                  'linear-title',
                  styles.title,
                  activeTabKey === '1' ? '' : styles.gray,
                )}
                justify="center"
                onClick={() => setActiveTabKey('1')}
              >
                <span>班级考核周积分</span>
              </Row>
            </Col>
            <Col span={12}>
              <Row
                className={classNames(
                  'linear-title',
                  styles.title,
                  activeTabKey === '2' ? '' : styles.gray,
                )}
                justify="center"
                onClick={() => setActiveTabKey('2')}
              >
                <span>班级考核学期积分</span>
              </Row>
            </Col>
          </Row>
        </Col>
        <Col span={24}>
          <Tabs
            type="card"
            size="small"
            tabPosition="bottom"
            style={{ height: 250 }}
            activeKey={activeTabKey}
          >
            <TabPane tab="周积分" key="1">
              {weekChartData.length ? (
                <Chart height={210} padding={[10, 60, 60, 0]} data={weekChartData} autoFit>
                  <Interval
                    adjust={[
                      {
                        type: 'stack',
                      },
                    ]}
                    color={[
                      'flag',
                      (xVal) => {
                        if (xVal === '减分') {
                          return 'red';
                        }
                        return '#49D589';
                      },
                    ]}
                    position="name*score"
                  />
                  <Axis name="name" label={['name', { rotate: Math.PI / 6 }]} />
                  <Legend name="flag" position="right" />
                </Chart>
              ) : (
                <Empty />
              )}
            </TabPane>
            <TabPane tab="学期积分" key="2">
              {termChartData.length ? (
                <Chart height={210} padding={[10, 60, 60, 0]} data={termChartData} autoFit>
                  <Interval
                    adjust={[
                      {
                        type: 'stack',
                      },
                    ]}
                    color={[
                      'flag',
                      (xVal) => {
                        if (xVal === '减分') {
                          return 'red';
                        }
                        return '#49D589';
                      },
                    ]}
                    position="name*score"
                  />
                  <Axis name="name" label={['name', { rotate: Math.PI / 6 }]} />
                  <Legend name="flag" position="right" />
                </Chart>
              ) : (
                <Empty />
              )}
            </TabPane>
          </Tabs>
        </Col>
      </Row>
    </div>
  );
};
